<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="登录账号设置" name="login">
          <component :is="loginComponent" />
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="user">
          <el-row type="flex" justify="end">
            <el-tooltip content="打印个人基本信息">
              <router-link :to="{name: 'print',params: id,query: {type: 'userInfo'}}">
                <i class="el-icon-printer" style="cursor: pointer;margin-bottom: 10px;" />
              </router-link>
            </el-tooltip>
          </el-row>
          <component :is="infoComponent" />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="job">
          <el-row type="flex" justify="end">
            <el-tooltip content="打印岗位信息">
              <router-link :to="{name: 'print',params: id,query: {type: 'jobInfo'}}">
                <i class="el-icon-printer" style="cursor: pointer;margin-bottom: 10px;" />
              </router-link>
            </el-tooltip>
          </el-row>
          <component :is="jobComponent" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import DetailLogin from './components/login'
import DetailInfo from './components/detailInfo'
import JobInfo from './components/jobInfo.vue'
export default {
  name: 'Detail',
  components: {
    DetailLogin,
    DetailInfo,
    JobInfo
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loginComponent: 'DetailLogin',
      infoComponent: 'DetailInfo',
      jobComponent: 'JobInfo',
      activeName: 'login'
    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
.el-form-item__content {
  .el_inputS{
    width: 220px;
  }
  .el_inputW {
    width: 300px;
  }
}
</style>
